<script lang="ts" setup>
import oaMenuForm from './oa-menu-form.vue'

const emit = defineEmits<{
  (event: 'add', value: any): void
  (event: 'edit', value: any): void
}>()

const props = withDefaults(
  defineProps<{
    modular: string
    subItem?: any
  }>(),
  {
    modular: 'edit',
    subItem: {}
  }
)

const menuFormEditRef = shallowRef()
const menuFromPopupRef = shallowRef()

const form = reactive({
  name: '',
  visitType: 'view',
  url: '',
  appId: '',
  pagePath: ''
})

watchEffect(() => {
  if (Object.keys(props.subItem).length != 0) {
    for (const key in form) {
      //@ts-ignore
      form[key] = props.subItem[key]
    }
  }
})

const handleRules = async () => {
  await menuFormEditRef.value.menuFormRef.validate()
  if (props.modular === 'edit') {
    emit('edit', { ...form })
  } else {
    emit('add', { ...form })
  }
  menuFromPopupRef.value.close()
  menuFormEditRef.value.menuFormRef.resetFields()
}
</script>

<template>
  <popup ref="menuFromPopupRef" async :clickModalClose="false" :title="`${modular === 'add' ? '新增' : '编辑'}子菜单`"
    @confirm="handleRules">
    {{ form }}
    <oa-menu-form ref="menuFormEditRef" modular="secondary" v-model:name="form.name" v-model:visitType="form.visitType"
      v-model:url="form.url" v-model:appId="form.appId" v-model:pagePath="form.pagePath"></oa-menu-form>
    <template #trigger>
      <slot></slot>
    </template>
  </popup>
</template>
